
@primaryColor: #2080f0;
@successColor: #18a058;
@dangerColor: #d03050;
@warningColor: #f0a020;

@borderColor: #dcdee0;
@backgroundColor:#fff;
@textColor:#323233;
@textColor5: #fff;
@textColor2:#969799;
@placeholder:#969799;
@disabledOpacity: 0.5;
@borderRadius: 2px;

.o-form-input {
  height: 35px;
  margin-right: 1px;
  border-radius: 3px;
  @apply w-full dark:bg-zinc-800 bg-white px-2  border border-solid border-gray-300 dark:border-0 relative inline-block;
  .suffix-icon, .prefix-icon {
    position: absolute;
    right: 5px;top: 50%;
    transform: translateY(-50%);
    height: 34px;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    i {
      @apply m-1;
      font-size: 16px;
      cursor: pointer;
      transition: all .3s;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      color: @textColor2
    }
    .icon-close{
      font-size: 14px
    }
  }
  .prefix-icon {
    left: 3px;
    right: auto;
  }
  .icon-close {
    display: none;
  }
  &:hover {
    .icon-close {
      display: block
    }
  }
  .has-prefix {
    padding-left: 30px
  }
  &.input-prepend, &.input-append {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    .prepend, .append {
      @apply border border-gray-300 dark:border-0;
      display: flex;
      align-items: center;
      padding: 0 5px;
    }
    .prepend {
      border-radius: 3px 0 0 3px;
      border-right: none;
      margin-right: -1px
    }
    .append {
      border-radius: 0 3px 3px 0;
      border-left: none;
      margin-left: -1px
    }
  }
}
.o-input-control {
  @apply  bg-transparent overflow-hidden outline-none box-border w-full h-full;
  line-height: 34px;
  padding: 0 10px;
  font-size: 14px;
  transition: all .3s;
  &:hover {
    opacity: .7
  }
  &:focus, &.focus {
    border-color: @primaryColor
  }
  &::placeholder,&.placeholder {
    color: @placeholder
  }
  /*禁用状态*/
  &.disabled {
    cursor: not-allowed;
    opacity: @disabledOpacity
  }
  &.large {
    height: 40px;
    line-height: 40px;
  }
  &.small {
    height: 32px;
    line-height: 32px;
  }
  &.mini {
    height: 28px;
    line-height: 28px;
  }
}
